<!--
 * @Author: 码上talk|RC/3189482282@qq.com
 * @Date: 2021-12-04 16:42:16
 * @LastEditTime: 2022-06-30 15:27:05
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /lejifen-ma/pages/index/index.vue
-->
<template>
  <view class="page index">
    <u-navbar title="积分商城" @rightClick="rightClick" fixed safeAreaInsetTop>
      <view slot="left" @tap="nav('/subpackage/user/pages/address/index')">
        <text class="iconfont icon">&#xe63a;</text>
        <text>{{ city }}</text>
        <text class="iconfont icon">&#xe61c;</text>
      </view>
    </u-navbar>
    <view class="i-banner">
      <swiper class="b-swiper" indicator-dots :autoplay="true" indicator-active-color="#dc117d">
        <swiper-item v-for="(item,i) in infoGet('maBannerConfigList',[])" :key="i">
          <view class="s-item">
            <image :src="item.cover" @tap="navBanner(item)" />
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="i-title">
      <text class="i-title_left">活动专场</text>
      <view class="i-title_right">
        <text class="i-block-more-txt">查看更多</text>
        <text class="iconfont">&#xe641;</text>
      </view>
    </view>
    <view class="i-goods-list">
      <view class="l-goods-card" v-for="item in infoGet('promote',[])" :key="item.id" @tap.prevent="nav(`/subpackage/goods/pages/detail/index?id=${item.id}`)">
        <view class="c_left">
          <ljf-img-loader />
        </view>
        <view class="c_right">
          <view class="r-name">{{ getObjVal(item,'title') }}</view>
          <view class="r-description">{{ getObjVal(item,'description') }}</view>
          <view class="r-bottom">
            <view class="r-bottom_amount">￥{{ getObjVal(item,'amountCost',0) }}</view>
            <view class="r-bottom_btn">兑换</view>
          </view>
        </view>
      </view>
    </view>
    <card-scan @toBindCard="isBindCardShow = $event"></card-scan>
    <card-bind :show="isBindCardShow" @cancel="isBindCardShow = $event"></card-bind>
    <ljf-goods-popup :show="isPopupShow" :goods="infoGet('goods',{})" @close="isPopupShow = false"></ljf-goods-popup>
  </view>
</template>

<script>
import amap from '@/utils/amap-wx.js';
import { mapActions } from 'vuex';
import cardBind from '@/components/ljf/card/bind.vue';
import cardScan from '@/components/ljf/card/scan.vue';
import mixinPageInfo from "@/mixins/type/pageInfo";

export default {
  components: {
    cardBind,
    cardScan
  },
  mixins: [mixinPageInfo],
  data () {
    return {
      amapPlugin: null,
      // 高德key
      key: 'd7721b55f4d4f534dc22a1d6524bb935',
      city:'',
      isBindCardShow: false,
      PAGE_CONFIG: {
        key: "index",
      }
    };
  },
  onLoad () {
    this.amapPlugin = new amap.AMapWX({
      key: this.key
    });
    this.getRegeo()
  },
  onPullDownRefresh () {
    if (!this.isLogin) {
      uni.stopPullDownRefresh();
      return;
    }
    this._boot().then(() => {
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    ...mapActions('user', ['setMaInitConfig']),
    navBanner (o) {
      if (o.type === 1) {
        this.nav(`/subpackage/goods/pages/detail/index?id=${o.goodsId}`)
      } else if (o.type === 2) {
        this.nav(`/pages/h5/index?url=${o.url}`)
      }
    },
    getRegeo () {
      uni.showLoading({ title: '获取信息中' });
      this.amapPlugin.getRegeo({
        success: (data) => {
          if (data) {
            this.city = data[0].regeocodeData.addressComponent.city;
            this.setMaInitConfig({
              province: data[0].regeocodeData.addressComponent.province,
              city: data[0].regeocodeData.addressComponent.city,
              district: data[0].regeocodeData.addressComponent.district,
            })
          }
          uni.hideLoading();
        }
      });
    }
  }
};
</script>

<style lang="less">
.index {
  height: 100%;
  padding-top: 144rpx;
  background: #f7f7f7;
  box-sizing: border-box;
  .icon {
    margin: 5rpx;
    font-size: 28rpx;
  }
  .i-banner {
    width: 100%;
    height: 400rpx;
    .b-swiper {
      height: 100%;
      .s-item {
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .i-title {
    .layout_flex(@a: center,@j:space-between);
    width: 100%;
    height: 90rpx;
    padding: 0 30rpx;
    line-height: 90rpx;
    box-sizing: border-box;
    &_left {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    &_right {
      font-size: 28rpx;
      font-weight: 500;
      color: #999;
    }
  }
  .i-goods-list {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    .l-goods-card {
      .layout_flex(@j:space-between);
      width: 100%;
      height: 240rpx;
      padding: 0 20rpx;
      margin-bottom: 20rpx;
      background: #fff;
      border-radius: 10rpx;
      box-sizing: border-box;
      .c_left {
        width: 200rpx;
        height: 200rpx;
        margin-right: 20rpx;
        border-radius: 15rpx;
      }
      .c_right {
        flex: 1;

        .r-name {
          width: 420rpx;
          height: 60rpx;
          font-size: 30rpx;
          font-weight: 500;
          color: #333;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .r-description {
          width: 420rpx;
          height: 30rpx;
          font-size: 26rpx;
          font-weight: 500;
          color: #999;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .r-bottom {
          .layout_flex(@j:space-between);
          margin-top: 30rpx;
          &_amount {
            font-size: 36rpx;
            font-weight: bold;
            color: #ff0000;
          }
          &_btn {
            .layout_flex(@j:center);
            width: 120rpx;
            height: 60rpx;
            font-size: 30rpx;
            font-weight: 500;
            color: #ff3d2b;
            border: 1rpx solid #ff3d2b;
            border-radius: 30rpx;
          }
        }
      }
    }
  }
}
</style>
